<template>
    <div class="recharge_dia">
        <el-dialog v-model="state.oneShow" title="充值" width="420px" @closed="onOneClosed">
            <el-form ref="formRef" :model="form" label-width="auto" @submit.prevent>
                <el-form-item label="充值金额">
                    <el-input-number
                        v-if="state.oneShow"
                        class="input_width_200"
                        v-model="form.amount"
                        :min="0"
                        :max="10000000"
                        :precision="2"
                        :controls="false"
                        placeholder="请输入充值金额"
                        @blur="onNumberBlur"
                        @input="onNumberInput" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="onOneCofirm" :disabled="form.hideAmount <= 0">
                        立即充值
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog
            v-model="state.twoShow"
            :title="state.twoTitle"
            :width="state.twoWidth"
            @open="onTwoOpen"
            @closed="onTwoClosed">
            <el-form class="form_list" label-width="auto">
                <div class="title">
                    请务必通过<span class="active">{{ state.bankName }}（{{ state.cardNo }}）</span>向下方专属账户充值：
                </div>
                <el-form-item label="充值金额：">￥{{ state.amount }}</el-form-item>
                <el-form-item label="户名："> 宝付网络科技（上海）有限公司</el-form-item>
                <el-form-item label="银行：">支付机构备付金集中存管账户 </el-form-item>
                <el-form-item label="银行卡号：">{{ state.bankNo }} </el-form-item>
                <el-form-item label="开户城市：">上海 </el-form-item>
                <el-form-item label="开户网点："> 宝付网络-备付金账户</el-form-item>
                <el-form-item label="行号："> 991290000793</el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.twoShow = false">关闭</el-button>
                    <el-button v-if="state.isOrder" type="primary" @click="onTwoCofirm">重新发起充值</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import request from '@/request';
import { isNotEmpty, isObject, floatMultiply, floatDivide } from '@/commons/utils';
import { reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
    modelValue: { type: Boolean, default: false }
});
const emit = defineEmits(['update:modelValue', 'closed']);
const state = reactive({
    isOrder: false, // 是否有预充值订单
    isOrderRequest: true, // 是否请求预充值订单信息
    oneShow: false,
    twoShow: false,
    twoTitle: '充值',
    twoWidth: '400px',

    bankName: '', // 银行名称
    cardNo: '', // 卡号后四位
    bankNo: '', // 卡号
    amount: 0 //   弹窗展示金额
});

const form = reactive({
    amount: void 0, // 输入框输入金额
    hideAmount: 0 // 输入框校验金额
});
// 输入框失去焦点, 校验金额
const onNumberBlur = v => {
    if (form.hideAmount <= 0) form.amount = void 0;
};
// 输入框输入金额，实时校验
const onNumberInput = v => {
    form.hideAmount = v;
};

// 充值弹窗关闭
const onOneClosed = () => {
    emit('update:modelValue', false);
    state.isOrderRequest = true;
    form.hideAmount = 0;
    form.amount = void 0;
};

// 充值弹窗确定
const onOneCofirm = async () => {
    await request('rechargeServ', { amount: floatMultiply(form.amount, 100) });
    const { data } = await request('getRechargeInfoServ');
    emit('update:modelValue', false);
    Object.assign(state, data);
    state.amount = floatDivide(state.amount, 100);
    state.twoTitle = '充值';
    state.twoShow = true;
};

// 防止银行名称过长文字换行
const onTwoOpen = () => {
    state.twoWidth = 400 + (state.bankName.length - 4) * 14 + 'px' || '420px';
};

// 展示弹窗关闭
const onTwoClosed = () => {
    emit('closed');
};

// 展示弹窗确认
const onTwoCofirm = () => {
    form.hideAmount = 0;
    state.twoShow = false;
    state.isOrderRequest = false;
    emit('update:modelValue', true);
    emit('cofirm');
};

//  判断是否有预充值订单
const getisOrder = async () => {
    try {
        const { data } = await request('getRechargeInfoServ');
        state.isOrder = isNotEmpty(data);
        if (state.isOrder) {
            emit('update:modelValue', false);
            Object.assign(state, data);
            state.amount = floatDivide(state.amount, 100) || 0;
            state.twoTitle = '您有一笔预充值订单';
            state.twoShow = true;
        } else {
            state.twoTitle = '充值';
            state.oneShow = true;
        }
    } catch (error) {
        emit('update:modelValue', false);
        if (isObject(error)) {
            ElMessage.error(error.msg);
        }
    }
};

watch(
    () => props.modelValue,
    v => {
        if (v) {
            if (state.isOrderRequest) {
                getisOrder();
            } else {
                state.oneShow = true;
                state.isOrder = false;
            }
        } else {
            state.oneShow = false;
        }
    }
);
</script>

<style lang="scss" scoped>
.recharge_dia {
    .el-form {
        margin-bottom: 30px;
        .el-form-item {
            .input_width_200 {
                flex: auto;
                display: flex;
                align-items: center;
                :deep(.el-input__inner) {
                    text-align: left;
                }
                &::after {
                    content: '元';
                    display: inline-block;
                    margin-left: 4px;
                }
            }
        }
    }
    .form_list {
        .el-form-item {
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
            line-height: 22px;
            margin-bottom: 0;
            :deep(.el-form-item__label) {
                padding: 0;
            }
        }
    }
    .title {
        margin-bottom: 5px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
    }
    .active {
        color: #ff6b00;
    }
}
</style>
